{literal}
<script type='text/javascript'>
$(document).ready(function(){
	$('#employeeList tr:last').addClass('last');
	$('#typeSelector').change(function(){
		loadEmployeeList($('#deptSelector').val(), $('#typeSelector').val(), $('#mappedSelector').val());
	});
	$('#deptSelector').change(function(){
		loadEmployeeList($('#deptSelector').val(), $('#typeSelector').val(), $('#mappedSelector').val());
	});
	$('#mappedSelector').change(function(){
		loadEmployeeList($('#deptSelector').val(), $('#typeSelector').val(), $('#mappedSelector').val());
	});		
});
</script>
{/literal}
<div id='employeeListFilter' class='filter_container' style='margin-bottom: 5px; position: relative; height: 20px;'>
	<div style="float: left; margin-right: 20px;" id="typeSelectorDiv">
		<span class='label'>{translate}Type{/translate}</span>&nbsp;
		<select style="width: 150px;" id="typeSelector">
			<option value='0'>{translate}All{/translate}</option>
			{html_options options=$typeList}
		</select>
	</div>
	<div style="float: left; margin-right: 20px;" id="deptSelectorDiv">
		<span class='label'>{translate}Department{/translate}</span>&nbsp;
		<select style="width: 150px;" id="deptSelector">
			<option value='0'>{translate}All{/translate}</option>
			{html_options options=$deptList}
		</select>
	</div>
	<div style="float: left;" id="mappedSelectorDiv">
	<span class='label'>{translate}Account{/translate}</span>&nbsp;
		<select style="width: 150px;" id="mappedSelector">
			<option value='all'>{translate}All{/translate}</option>
			<option value='yes' {if isset($accountCreated) && $accountCreated eq 'yes'} selected="selected"{/if}>{translate}In Use{/translate}</option>
			<option value='no' {if isset($accountCreated) && $accountCreated eq 'no'} selected="selected"{/if}>{translate}Lock{/translate}</option>
		</select>
	</div>
</div>
<div id='employeeListResult' style="height: 325px; overflow: auto;">
	{$employeeList}
</div>